<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>处理用户输入</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 通过v-on指令 即简写为@ 添加时间侦听器，调用Vue实例中定义的方法 -->
    <div id="app">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <!-- v-model: 实现表单输入和应用状态之间的双向绑定 -->
    <div id="app-2">
        <p>{{ message }}</p>
        <input v-model="message">
    </div>

    <div id="app-3">
        <a v-bind:href="href">百度一下</a>
        <br/>
        <input type="text" v-model="href"/>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "hello world, and hello Vue!",
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split("").reverse().join("");
                }
            }
        });
        var app2 = new Vue({
            el: "#app-2",
            data: {
                message: "hello, Vue!",
            }
        });
        var app3 = new Vue({
            el: "#app-3",
            data: {
                href: "https://www.baidu.com",
            }
        })
    </script>
</body>
</html>